import { Link } from "react-router-dom";
import { motion } from "framer-motion";

// 404页面组件
export default function NotFound() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center px-4">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6 }}
        className="w-full max-w-md bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 text-center"
      >
        <div className="text-9xl font-bold text-indigo-100 dark:text-indigo-900 mb-4">404</div>
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">页面未找到</h1>
        <p className="text-gray-600 dark:text-gray-400 mb-8">
          抱歉，您请求的页面不存在或已被移动
        </p>
        
        <motion.div
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
        >
          <Link 
            to="/" 
            className="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-xl inline-flex items-center transition-all"
          >
            <i className="fa-solid fa-house mr-2"></i>
            返回首页
          </Link>
        </motion.div>
      </motion.div>
    </div>
  );
}